import { Layout, Menu } from "antd"
import Sider from "antd/es/layout/Sider"
import { Content } from "antd/es/layout/layout"
import { useState } from "react"
import UrlPanel from "./components/UrlPanel";
import Base64Panel from "./components/Base64Panel";
import HashPanel from "./components/HashPanel";
import JsonPanel from "./components/JsonPanel";
import YamlPanel from "./components/YamlPanel";
import TomlPanel from "./components/TomlPanel";
import TimestampPanle from "./components/TimestampPanel";


function App() {
  const [selKey, setSelKey] = useState("url");

  return (
    <Layout hasSider style={{ height: "calc(100vh - 20px)", overflow: "hidden" }}>
      <Sider
        style={{
          overflow: 'auto',
          height: '100vh',
        }}
      >
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={[
          {
            key: "url",
            label: "Url编解码",
          },
          {
            key: "base64",
            label: "Base64编解码",
          },
          {
            key: "hash",
            label: "Hash编码",
          },
          {
            key: "json",
            label: "Json转换",
          },
          {
            key: "yaml",
            label: "Yaml转换",
          },
          {
            key: "toml",
            label: "Toml转换",
          },
          {
            key: "timeStamp",
            label: "时间戳转换",
          }
        ]} selectedKeys={[selKey]} onSelect={info => {
          if (info.selectedKeys.length > 0) {
            setSelKey(info.selectedKeys[0]);
          }
        }} />
      </Sider>
      <Content style={{ padding: "10px 10px", height: "100vh", backgroundColor: "white", overflow: "hidden" }}>
        {selKey == "url" && (
          <UrlPanel />
        )}
        {selKey == "base64" && (
          <Base64Panel />
        )}
        {selKey == "hash" && (
          <HashPanel />
        )}
        {selKey == "json" && (
          <JsonPanel />
        )}
        {selKey == "yaml" && (
          <YamlPanel />
        )}
        {selKey == "toml" && (
          <TomlPanel />
        )}
        {selKey == "timeStamp" && (
          <TimestampPanle />
        )}
      </Content>
    </Layout>
  )
}

export default App
